<template>
  <div>
    <page-nav :titlearr="titlearr"></page-nav>
    <div class="admin_wrap">
      <div class="admin_form">
        <div class="search_wrap">
          <el-input v-model="searchText"></el-input>
          <el-button type="primary"
                     @click="search">查询</el-button>
        </div>
        <el-button type="success"
                   @click="dialogVisible=true">添加</el-button>
      </div>
      <!-- 表格 -->
      <div class="table_title">
        <i class="el-icon-platform-eleme"></i>
        <div>学员列表</div>
      </div>
      <el-table border
                :data="adminList">
        <el-table-column label="用户名"
                         prop="userName">

        </el-table-column>
        <el-table-column label="姓名"
                         prop="turename">

        </el-table-column>
        <el-table-column label="用户权限">
          <template slot-scope="scope">
            <div>
              {{scope.row.power=="1"?'系统管理员':'课程管理员'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机"
                         prop="phone">

        </el-table-column>
        <el-table-column label="编辑日期"
                         prop="upDateAt">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="primary"
                         @click="edit(scope.row)">编辑</el-button>
              <el-button type="success"
                         @click="del(scope.row.tokenId)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page_wrap">
        <el-button size="small"
                   type="primary"
                   @click="goTop"> 首页</el-button>
        <el-pagination :total="total"
                       background
                       :page-size="pageSize"
                       :current-page="pageStart"
                       @current-change="pagechange"
                       layout="prev,pager,next">

        </el-pagination>
        <el-button size="small"
                   type="primary"
                   @click="goEnd">尾页</el-button>
      </div>
    </div>
    <!-- 弹出层部分 -------------------->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogVisible"
               :close-on-click-modal="false"
               width="50%">
      <!-- 中间部分 -->
      <el-form>
        <el-form-item label="用户名:">
          <el-input v-model="addAdmin.userName"></el-input>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="addAdmin.truename"></el-input>
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input v-model="addAdmin.phone"></el-input>
        </el-form-item>
        <el-form-item label="权限：">
          <el-select v-model="addAdmin.power">
            <el-option value="1"
                       label="系统管理员"></el-option>
            <el-option value="2"
                       label="课程管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 弹出层脚步 -->
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="add">确 定</el-button>
        <el-button type="primary"
                   @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pageNav from '../../components/pageNav'
export default {
  components: { pageNav },
  created () {
    this.getAdmin()
  },
  methods: {
    edit (row) {//编辑的点击
      console.log(row)
      this.dialogTitle = "修改管理员"
      this.editId = row.tokenId;//点击编辑存储 编辑的管理员id
      this.dialogVisible = true;
      // 把数据赋值回输入框
      this.addAdmin.userName = row.userName;
      this.addAdmin.phone = row.phone;
      this.addAdmin.truename = row.turename;
      this.addAdmin.power = row.power == "1" ? '系统管理员' : '课程管理员';
    },
    goEnd () {//跳转尾页
      this.pageStart = this.pageCount;//把当前请求页码 赋值为总页数
      this.getAdmin();
    },
    goTop () {//跳转首页
      this.pageStart = 1;
      this.getAdmin();
    },
    pagechange (current) {//分页改变事件
      this.pageStart = current; //赋值当前页码
      this.getAdmin();  //页码改变从新获取列表
    },
    search () {//点击查询重新获取列表
      this.getAdmin();
      this.searchText = "";//查询完成 清空输入框
    },
    del (tokenId) {//删除
      this.axios({
        url: "/VueHandler/AdminHandler?action=delete",
        method: "get",
        params: {
          tokenId: tokenId
        }
      }).then(res => {
        // 删除成功  从新获取列表
        this.$alert("删除成功")
        console.log(res)
        this.getAdmin()
      })
    },
    getAdmin () {//获取管理员页面
      this.axios({
        url: "/VueHandler/AdminHandler?action=show",
        method: "get",
        params: {
          searchText: this.searchText,//查询字段
          pageStart: this.pageStart//当前页码
        }
      }).then(res => {
        console.log(res)
        this.adminList = res.data.data.list; //数据列表
        this.total = res.data.data.count; //数据总条数
        this.pageSize = res.data.data.pageSize; //存每页的条数
        this.pageCount = Math.ceil(this.total / this.pageSize)//总页数
      })
    },

    add () {

      if (this.editId == '') { //没有修改id 完成添加
        // 调取添加接口
        this.axios({
          url: "/VueHandler/AdminLoginAndRegHandler?action=add",
          method: "post",
          data: this.$qs.stringify({
            userName: this.addAdmin.userName,
            phone: this.addAdmin.phone,
            password: "123456",
            turename: this.addAdmin.truename,
            power: this.addAdmin.power
          })
        }).then(res => {
          if (res.data.success) {
            this.$alert("添加成功")
            this.addAdmin.userName = ""
            this.addAdmin.phone = ""
            this.addAdmin.truename = ""
            this.dialogVisible = false;
            this.getAdmin()//添加成功 重新获取列表
          }
          if (res.data.err) {
            this.$alert(res.data.err)//后台返回的错误代码
          }
        })
      } else {
        this.axios({
          url: "/VueHandler/AdminHandler?action=update",
          method: "post",
          data: this.$qs.stringify({
            tokenId: this.editId,//比添加操作多的修改id
            userName: this.addAdmin.userName,
            phone: this.addAdmin.phone,
            password: "123456",
            turename: this.addAdmin.truename,
            power: this.addAdmin.power
          })
        }).then(res => {
          console.log(res)
          this.$alert("修改成功")
          this.addAdmin.userName = ""
          this.addAdmin.phone = ""
          this.addAdmin.truename = ""
          this.dialogVisible = false;
          this.editId = "";//修改完成  清空修改id
          this.dialogTitle = "添加管理员"
          this.getAdmin();
        })
      }
    }
  },
  data () {
    return {
      searchText: "",//搜索文本
      pageStart: 1,
      adminList: [],
      dialogTitle: "添加管理员",//弹出框的标题
      editId: '',//编辑id
      total: 0,//总数据条数
      pageSize: 3,//每页的条数
      pageCount: 0,//总页数
      dialogVisible: false,//弹出层显示隐藏
      addAdmin: {
        userName: "",
        truename: "",
        phone: "",
        power: ""
      },
      titlearr: [
        {
          name: "首页",
          path: "/home"
        },
        {
          name: "用户管理",
          path: "/home"
        },
        {
          name: "学员管理",
          path: "/student"
        }
      ]
    }
  }
}
</script>
<style lang="less">
.admin_wrap {
  width: 1300px;
  margin: 30px auto;
  .admin_form {
    display: flex;
    justify-content: space-between;
    .search_wrap {
      display: flex;
    }
  }
}
// 表头样式
.table_title {
  width: 1300px;
  margin: 30px auto 0;
  line-height: 40px;
  display: flex;
  i {
    width: 38px;
    height: 38px;
    border: 1px solid black;
    line-height: 38px;
    text-align: center;
    font-size: 20px;
    border-right: none;
  }
  > div {
    height: 40px;
    border: 1px solid black;
    flex: 1;
    padding-left: 20px;
    box-sizing: border-box;
  }
}
.page_wrap {
  display: flex;
}
</style>